<template>
  <div>
    <el-card>
      <el-form ref="form" :model="UserQueryVo" label-width="80px">
        <el-row>
          <el-col :span="6">
            <el-form-item label="昵称">
              <el-input style="width:90%;" size="mini" v-model="UserQueryVo.nickName" placeholder="昵称模糊搜索"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="用户名">
              <el-input style="width:90%;" size="mini" v-model="UserQueryVo.username" placeholder="用户名模糊搜索"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row type="flex" justify="end">
          <el-col :span="8">
            <el-form-item>
              <el-button size="mini" >重置</el-button>

              <el-button size="mini" type="primary" >搜索</el-button>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </el-card>

    <!-- 新增或编辑dialog -->
    <el-dialog width="30%" title="编辑用户" :visible.sync="dialogFormVisible">
      <el-form :rules="rules" ref="rulesForm" :model="addList">
        <el-form-item label="用户名" :label-width="formLabelWidth" prop="username">
          <el-input size="mini" v-model="addList.username" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="用户昵称" :label-width="formLabelWidth" prop="nickName">
          <el-input size="mini" v-model="addList.nickName" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="密码" :label-width="formLabelWidth">
          <el-input size="mini" show-password v-model="addList.password" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="用户头像" :label-width="formLabelWidth" prop="nickName">
          <el-upload
            class="avatar-uploader"
            :action="uploadUrl"
            :headers="uploadHeader"
            :show-file-list="false"
            :on-success="handleAvatarSuccess"
            >
            <div style="background-color:#c0c4cc;border-radius:50%;height:40px;">
              <img v-if="imageUrl" :src="imageUrl" class="avatar">
              <i style="color:#fff;" v-else class="el-icon-user-solid avatar-uploader-icon"></i>
            </div>
            
          </el-upload>
        </el-form-item>
        <el-form-item label="选择角色" :label-width="formLabelWidth">
          <el-select size="mini" v-model="addList.region" placeholder="请选择活动区域">
            <el-option label="区域一" value="shanghai"></el-option>
            <el-option label="区域二" value="beijing"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogFormVisible = false">确 定</el-button>
      </div>
    </el-dialog>


    <el-card>
      <div slot="header">
        <el-button size="mini" type="primary" @click="addUser" >新增</el-button>
      </div>

        <el-table
          :data="list"
          border
          style="width: 100%">
          <el-table-column
            type="index"
            label="#"
            width="50">
          </el-table-column>

          <el-table-column
            prop="username"
            label="用户名"
            width="200">
          </el-table-column>

          <el-table-column
            prop="nick_name"
            label="昵称"
            width="200">
          </el-table-column>

          <el-table-column
            label="头像"
            width="200">
            <template slot-scope="scope">
              <img style="width:120px;height:80px;" :src="scope.row.salt" alt="">
            </template>
          </el-table-column>

          <el-table-column
            prop="roles"
            label="角色"
            width="500">
          </el-table-column>

          <el-table-column
            prop="create_time"
            label="添加时间"
            width="180">
          </el-table-column>

            <el-table-column
              fixed="right"
              label="操作"
              width="250">
              <template slot-scope="scope">
                <el-button type="success" size="mini">编辑</el-button>
                <el-button type="danger" size="mini">删除</el-button>
              </template>
            </el-table-column>

        </el-table>
    </el-card>








  </div>
</template>

<script>
import {findUsersByPage} from '@/api/authority/account';
import mixin from '@/mixins/index';
export default {
  mixins:[mixin],
  data(){
    return{
      //管理用户分页列表
      list:[],
      //新增或编辑用户列表
      addList:{},
      dialogFormVisible:false,
      formLabelWidth:'90px',
      imageUrl:'',
      //模糊搜索
      UserQueryVo:{
        nickName:'',
        username:''
      },
      rules: {
        username: [
          { required: true, message: '用户名名称不能为空', trigger: 'blur' },
        ],
        nickName: [
          { required: true, message: '昵称不能为空', trigger: 'blur' },
        ],
      }
    }
  },
  created(){
    this.getData()
  },
  methods:{
    //获取管理用户分页列表
    getData(){
      // for(var key of this.UserQueryVo)
      // {
      //   console.log(key)
      //   console.log(this.UserQueryVo[key])
      // }
      findUsersByPage(this.page.currentPage,this.page.size).then(res=>{
        console.log(res);
        this.list = res.data.rows
      })
    },
    //新增账号
    addUser(){
      this.dialogFormVisible=true
    },
    //上传图片成功后的回调函数
    handleAvatarSuccess(res,file){
      this.imageUrl=res.data.fileUrl
    }
  }
}
</script>


<style lang="scss">
  .el-card{
    margin: 20px;
  }
</style>

<style lang="scss" scoped>
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409EFF;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 40px;
  height: 40px;
  line-height: 40px;
  text-align: center;
}
.avatar {
  width: 40px;
  height: 40px;
  display: block;
}
</style>

